// 1 导入相关包
// import React from 'react'; // 创建react 元素的
import ReactDOM from 'react-dom/client'; //渲染 react 元素的
// 引入css
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 在 JSX 中使用样式
// 浏览器：<h1 style="color: red; background-color: pink; width: 300px;">Hello React</h1>

// 1 在 react 中添加行内样式
// const jsxElem = (
//   <h1 style={{ color: 'red', backgroundColor: 'pink', width: 300 }}>
//     Hello React
//   </h1>
// );

// 2 在 react 中添加类选择器样式
// 浏览器 <h1 class="p-title">Hello React</h1>
// const jsxElem = <h1 className="p-title">Hello React</h1>;

// 如何让样式实现按 条件设置（动态设置）？
// 提示：条件在哪里？样式在哪里？
// 1 条件在哪？js里
let isLoading = true;

// 2 样式在哪里？ style class
// 在 style 里
// const jsxElem = (
//   <h1
//     style={{
//       color: isLoading ? 'red' : 'blue',
//       backgroundColor: 'pink',
//       width: 300,
//     }}
//   >
//     Hello React
//   </h1>
// );

// 在class里
const jsxElem = (
  <h1 className={isLoading ? 'p-loading' : 'p-result'}>Hello React</h1>
);

// 渲染
root.render(jsxElem);
